<template>
	<el-dialog v-model="state.dialog" title="操作退款">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>退款商品</span>
				</div>
			</template>
			<el-row v-if="state.orderItem">
				<el-col :span="6">
					<el-image style="width: 80px; height: 80px" :src="state.orderItem.picUrl" fit="cover" :preview-teleported="true"></el-image>
				</el-col>
				<el-col :span="18">
					<div class="overflow-line-clamp-2 name">{{ state.orderItem.spuName }}</div>
					<p></p>
					<div style="display: flex; justify-content: space-between">
						<span style="color: red">￥{{ state.orderItem.totalPrice }}</span>
						x{{ state.orderItem.buyQuantity }}
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="box-card">
			<el-form ref="formRef" :model="state.form" :rules="state.rules" label-width="130px">
				<el-form-item label="退款金额：">
					<span style="color: red">￥{{ state.refundInfo.refundAmount }}</span>
				</el-form-item>
				<el-form-item label="退款原因：">{{ state.refundInfo.refundReason }}</el-form-item>
				<!-- 只有退款中和退货退款中状态 可以进行退款操作 -->
				<el-form-item label="退款操作：" prop="status" v-if="state.refundInfo.status == '1' || state.refundInfo.status == '2'">
					<el-radio-group v-model="state.form.status">
						<!-- 子订单退款中显示 -->
						<el-radio label="11" v-if="state.orderItem.status == '1'">同意退款</el-radio>
						<el-radio label="21" v-if="state.orderItem.status == '1'">拒绝退款</el-radio>
						<!-- 子订单退货退款中显示 -->
						<el-radio label="12" v-if="state.orderItem.status == '2'">同意退货退款</el-radio>
						<el-radio label="22" v-if="state.orderItem.status == '2'">拒绝退货退款</el-radio>
					</el-radio-group>
				</el-form-item>
				<div v-else>
					<el-form-item label="退款状态：">{{ state.refundInfo.statusDesc }}</el-form-item>
					<el-form-item label="是否到账：">
						<el-tag :type="state.refundInfo.arrivalStatus == '1' ? 'success' : 'danger'" effect="light" round>{{
							state.refundInfo.arrivalStatus == '1' ? '已到账' : '未到账'
						}}</el-tag>
					</el-form-item>
					<el-form-item label="退回方式：" v-if="state.refundInfo.userReceivedAccount">
						<span>{{ state.refundInfo.userReceivedAccount }}</span>
					</el-form-item>
					<el-form-item label="退款流水号：" v-if="state.refundInfo.refundId">
						<span>{{ state.refundInfo.refundId }}</span>
					</el-form-item>
				</div>

				<el-form-item label="拒绝退款原因：" prop="refuseReason" v-if="state.form.status == '21' || state.form.status == '22'">
					<el-input v-model="state.form.refuseReason" :rows="2" type="textarea" placeholder="请输入拒绝退款原因" />
				</el-form-item>
			</el-form>
		</el-card>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.dialog = false">关闭</el-button>
				<el-button type="primary" @click="doSubmit" :loading="state.loading" v-if="state.refundInfo.status == '1' || state.refundInfo.status == '2'"
					>确认</el-button
				>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { getById, refundObj } from '/@/api/order/orderrefund';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['initPage']);
const state = reactive({
	rules: {
		refuseReason: [
			{
				required: true,
				message: '请输入拒绝退款原因',
				trigger: 'blur',
			},
		],
		status: [
			{
				required: true,
				message: '请选择退款操作',
				trigger: 'blur',
			},
		],
	},
	refundInfo: {
		id: undefined,
		status: '',
		refuseReason: '',
		arrivalStatus: '',
		userReceivedAccount: '',
		refundId: '',
		refundAmount: 0,
		statusDesc: '',
		refundReason: '',
	},
	orderItem: {
		picUrl: '',
		spuName: '',
		totalPrice: 0,
		buyQuantity: 0,
		status: '',
	},
	dialog: false,
	loading: false,
	form: {
		id: undefined,
		status: '',
		refuseReason: '',
	},
});
const formRef = ref();
const initPage = (id: string) => {
	state.form = { id: undefined, status: '', refuseReason: '' };
	getDetail(id);
	state.dialog = true;
};
const getDetail = (id: string) => {
	getById(id).then((response) => {
		state.refundInfo = response.data.data;
		state.form.refuseReason = state.refundInfo.refuseReason;
		state.orderItem = response.data.data.orderItem;
	});
};
const doSubmit = async () => {
	state.loading = true;
	state.form.id = state.refundInfo.id;
	try {
		await refundObj(state.form);
		ElMessage.success('操作成功');
		state.loading = false;
		state.dialog = false;
		emit('initPage');
	} catch (e) {
		state.loading = false;
	}
};
defineExpose({
	initPage,
});
</script>
